import { getDictList } from '@/apis/accessManagement/dict'
import { Modal, Tag, Drawer, Button, Flex, Input } from 'antd'
import ExcelTable from '@components/exportExcel'
import FormView from './components/FormView'
import KeyFormView from './components/KeyFormView'
import { useRef, useState } from 'react'
import { ActionType, ProFormInstance } from '@ant-design/pro-components'
import layout from './index.module.scss'

const KeyManage: React.FC = () => {
  useRef<ActionType>()
  useRef<ProFormInstance>()
  const actionRef = useRef()
  const [tableItem, setTableItem] = useState()
  const [titleDrawer, setTitleDrawer] = useState('新增')
  const [detailDrawer, setDetailDrawer] = useState(false)
  const [keyDrawer, setKeyDrawer] = useState(false)

  function showAddDrawer(title: string, item?: any) {
    if (item) {
      setTableItem(item)
    }
    setTitleDrawer(title)
    setDetailDrawer(true)
  }

  function onCloseDrawer() {
    setDetailDrawer(false)
    setKeyDrawer(false)
  }

  return (
    <>
      <Flex justify="space-between" align="flex-start">
            <div className={layout.keyView}>
            <div>
                <Button type="primary" onClick={() => setKeyDrawer(true)}>新增</Button>
                <Button style={{ marginLeft: 10 }}>刷新</Button>
            </div>
            <Input.Search className={layout.keyInputSearch} placeholder="请输入字典名称" enterButton />
            <ul className={layout.keyList}>
                <li className={layout.keyItem}>
                <span>敏感类型</span>
                <span>sensitive_words_type</span>
                </li>
                <li className={layout.keyItem}>
                <span>敏感类型</span>
                <span>sensitive_words_type</span>
                </li>
                <li className={layout.keyItem}>
                <span>敏感类型</span>
                <span>sensitive_words_type</span>
                </li>
            </ul>
            </div>
            <ExcelTable
                className={layout.table}
                actionRef={actionRef}
                requestFn={ async (params) => {
                    const { dictId,...newParams } = params; // 处理所需参数名
                    const data = await getDictList({
                        ...newParams,
                        dictId:null,
                    })
                    return data
                }}
                // requestFn={params => {
                //     return {
                //     'code': 200,
                //     'message': '操作成功',
                //     'data': {
                //         'pageNum': 1,
                //         'pageSize': 20,
                //         'totalPage': 1,
                //         'total': 3,
                //         'list': [
                //         {
                //             id: 1,
                //             createTime: '2022-02-20 13:50:15',
                //             person: 'admin',
                //             type: '1',
                //             mode: '首页',
                //             content: '用户信息-修改用户信息',
                //             ip: '【中国/成都】192.168.1.1',
                //             children: [
                //             {
                //                 id: 2,
                //                 createTime: '2022-02-20 13:50:15',
                //                 person: 'admin',
                //                 type: '1',
                //                 mode: '首页',
                //                 content: '用户信息-修改用户信息',
                //                 ip: '【中国/成都】192.168.1.1'
                //             },
                //             {
                //                 id: 3,
                //                 createTime: '2022-02-20 13:50:15',
                //                 person: 'admin',
                //                 type: '1',
                //                 mode: '首页',
                //                 content: '用户信息-修改用户信息',
                //                 ip: '【中国/成都】192.168.1.1'
                //             }
                //             ]
                //         }
                //         ]
                //     }
                //     }
                // }}
                toolBarRenderFn={() => [<Button key="add" onClick={() => showAddDrawer('新增')}>新增</Button>]}
                search={false}
                rowSelection={false}
                expandable={{ defaultExpandAllRows: true }}
                columns={[
                    /** search */
                    {
                    title: '标签名称',
                    dataIndex: 'mode',
                    hideInSearch: true
                    },
                    {
                    title: '类型编码',
                    dataIndex: 'person',
                    hideInSearch: true
                    },
                    {
                    title: '数值',
                    dataIndex: 'person',
                    hideInSearch: true
                    },
                    {
                    title: '排序',
                    dataIndex: 'person',
                    hideInSearch: true
                    },
                    {
                    title: '状态',
                    dataIndex: 'type',
                    hideInSearch: true,
                    render: (_, record) => {
                        return <Tag color={record.type == 1 ? 'success' : 'error'}>{record.type == 1 ? '成功' : '失败'}</Tag>
                    }
                    },
                    {
                    title: '操作人',
                    dataIndex: 'person',
                    hideInSearch: true
                    },
                    {
                    title: '操作时间',
                    dataIndex: 'createTime',
                    hideInSearch: true
                    },
                    {
                    title: '操作',
                    key: 'option',
                    valueType: 'option',
                    render: (_, record) => [
                        <a key="update" onClick={() => showAddDrawer('修改', record)}>修改</a>,
                        <a key="disabled" onClick={() => {
                        Modal.warning({
                            title: '提示',
                            content: '确定禁用该用户吗?',
                            okText: '确定',
                            okCancel: true,
                            onOk() {
                            console.log('Confirmed:onOk ')
                            }
                        })
                        }}>禁用</a>,
                        <a key="delete" onClick={() => {
                        Modal.warning({
                            title: '提示',
                            content: '确定删除该用户吗?',
                            okText: '确定',
                            okCancel: true,
                            onOk() {
                            console.log('Confirmed:onOk ')
                            }
                        })
                        }}>删除</a>
                    ]
                }
            ]} />
        </Flex>
        <Drawer title={titleDrawer} onClose={onCloseDrawer} open={detailDrawer} destroyOnClose>
            <FormView item={tableItem} onClose={onCloseDrawer}></FormView>
        </Drawer>
        <Drawer title="新增" onClose={onCloseDrawer} open={keyDrawer} destroyOnClose>
            <KeyFormView onClose={onCloseDrawer}></KeyFormView>
        </Drawer>
    </>
  )
}

export default KeyManage